<template>
    <el-table :data="discount" border style="width: 60%">
        <el-table-column label="数量">
            <template #default="{ row }">
                <el-input v-model="row.count" />
            </template>
        </el-table-column>
        <el-table-column label="折扣">
            <template #default="{ row }">
                <el-input @change="setCount" v-model="row.discount" />
            </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="deleteRow(row)">删除</el-button>
                <el-button link type="primary" size="small" @click="onAddItem">添加</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const discount = ref([{
    count: 0,
    discount: 0,
    price: 0
}])

const emits = defineEmits<{
    (event: string, value: IDiscount): void
}>()

const setCount = () => {
    discount.value.forEach(item => {
        emits("getCount", item)
    })
}

const deleteRow = (index: number) => {
    discount.value.splice(index, 1)
}

const onAddItem = () => {
    discount.value.push({
        count: 0,
        discount: 0,
        price: 0
    })
}
</script>

<style lang="scss" scoped></style>